<template>
  <div class="basic_info">
    <div class="home_left">
      <div class="icon_div">
        <div class="div_i">
          <div v-for="(i, k) in homeIconData" :key="k" @click="handleHomeSkip(i)">
            <img :src="i.subIcon" :alt="i.subState" style="height: 37px;" />
            <p>{{ i.subTitle }}</p>
          </div>
        </div>
        <p @click="dialogVisible = true && isOpenAccount" style="display: flex;flex-direction: column;width: 17px;font-size: 8px;">
          <img :src="require('../../assets/home/edit.png')" ref="guide7"></img>
          设置
        </p>
      </div>
      <div class="report_div" v-if="businessStatement && !isBaseVersion">
        <div class="div_tit tab_title">
          <div class="title">
            <span @click="toPurchaseReport" style="cursor: pointer;">经营报表</span>
            <img class="tab_title_img" :src="showBusiness ? require('../../assets/home/open.png') : require('../../assets/home/close.png')" alt="" @click="handleShow('showBusiness')">
          </div>
          <div class="tit_select_date">
            <p @click="reportDate = '本日'" :class="reportDate == '本日' ? 'active_style' : ''">日</p>
            <p @click="reportDate = '本周'" :class="reportDate == '本周' ? 'active_style' : ''">周</p>
            <p @click="reportDate = '本月'" :class="reportDate == '本月' ? 'active_style' : ''">月</p>
            <p @click="reportDate = '本年'" :class="reportDate == '本年' ? 'active_style' : ''">年</p>
            <div class="date_picker_style">
              <p
                v-if="reportDateRange.startDate"
              >{{ reportDateRange.startDate }}~{{ reportDateRange.endData }}</p>
              <p v-else></p>
              <el-date-picker
                v-model="value1"
                type="daterange"
                range-separator="~"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="onReportClickPicker"
              ></el-date-picker>
              <i class="el-icon-date"></i>
            </div>
          </div>
        </div>
        <div class="business">
          <div label="经营报表" name="jybb">
              <div class="report_sub_div">
                <div class="bysr">
                  <h3>{{reportDate}}收入</h3>
                  <h4 v-show="showBusiness">{{ reportManage.income }}</h4>
                  <h4 v-show="!showBusiness">******</h4>
                  <img :src="require('../../assets/home/bysr.png')" alt="">
                </div>
                <div class="bysr">
                  <h3>{{reportDate}}支出</h3>
                  <h4 v-show="showBusiness">{{ reportManage.expense }}</h4>
                  <h4 v-show="!showBusiness">******</h4>
                  <img :src="require('../../assets/home/byzc.png')" alt="">
                </div>
                <div class="bysr">
                  <h3>{{reportDate}}经营利润</h3>
                  <h4 v-show="showBusiness">{{ reportManage.operatingProfit }}</h4>
                  <h4 v-show="!showBusiness">******</h4>
                  <img :src="require('../../assets/home/byjylr.png')" alt="">
                </div>
                <div class="byjyxx">
                  <h3>{{reportDate}}其他经营信息</h3>
                  <div class="inner_count">
                    <div v-for="item in otherArr" :key="item.title">
                      <h5>{{item.title}}</h5>
                      <h4 v-show="showBusiness"><span v-if="item.title !== '毛利率'" style="font-size: 12px;">¥</span>{{ reportManage[item.key] }}<span v-if="item.title === '毛利率'" style="font-size: 12px;">%</span></h4>
                      <h4 v-show="!showBusiness">******</h4>
                    </div>
                  </div>
                </div>
              </div>
            </div>
        </div>
      </div>
      <div class="bill_div" v-if="salesStatus">
        <div class="div_tit tab_title">
          <div class="title">
            <span @click="toSalesReport" style="cursor: pointer;">销售状况</span>
            <img class="tab_title_img" :src="showSales ? require('../../assets/home/open.png') : require('../../assets/home/close.png')" alt="" @click="handleShow('showSales')">
          </div>
          <div class="tit_select_date">
            <p @click="billDate = '本日'" :class="billDate == '本日' ? 'active_style' : ''">日</p>
            <p @click="billDate = '本周'" :class="billDate == '本周' ? 'active_style' : ''">周</p>
            <p @click="billDate = '本月'" :class="billDate == '本月' ? 'active_style' : ''">月</p>
            <p @click="billDate = '本年'" :class="billDate == '本年' ? 'active_style' : ''">年</p>
            <div class="date_picker_style">
              <p
                v-if="billDateRange.startDate"
              >{{ billDateRange.startDate }}~{{ billDateRange.endData }}</p>
              <p v-else></p>
              <el-date-picker
                v-model="billNowDate"
                type="daterange"
                range-separator="~"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="onBillClickPicker"
              ></el-date-picker>
              <i class="el-icon-date"></i>
            </div>
          </div>
        </div>
        <div class="bill_sub_div">
          <div class="dashboard-cards">
            <!-- 销售额卡片 -->
            <div class="card-item">
              <img src="@/assets/home/icon1.png" class="card-img" alt="">
              <div class="card-content">
                <div class="card-title">{{billDate}}销售额</div>
                <div class="card-value" v-show="showSales">¥{{ saleManage.saleroom && saleManage.saleroom.saleroomNum }}</div>
                <div class="card-value" v-show="!showSales">******</div>
                <el-divider></el-divider>
                <div class="card-footer">
                  <div class="compare-text">
                    比上期 <span :class="[saleManage.saleroom && saleManage.saleroom.up ? 'up-text' : 'down-text']">{{ saleManage.saleroom && saleManage.saleroom.up ? '新增' : '减少'}}</span>
                  </div>
                  <div class="compare-value">
                    <span v-show="showSales">¥{{ saleManage.saleroom && saleManage.saleroom.saleNum }}</span>
                    <span v-show="!showSales">******</span>
                    <i :class="[saleManage.saleroom && saleManage.saleroom.up ? 'el-icon-top' : 'el-icon-bottom', saleManage.saleroom && saleManage.saleroom.up ? 'up-value' : 'down-value']"></i>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 单数卡片 -->
            <div class="card-item">
              <img src="@/assets/home/icon2.png" class="card-img" alt="">
              <div class="card-content">
                <div class="card-title">{{billDate}}单数</div>
                <div class="card-value" v-show="showSales">¥{{ saleManage.orders && saleManage.orders.saleroomNum }}</div>
                <div class="card-value" v-show="!showSales">******</div>
                <el-divider></el-divider>
                <div class="card-footer">
                  <div class="compare-text">
                    比上期 <span :class="[saleManage.orders && saleManage.orders.up ? 'up-text' : 'down-text']">{{ saleManage.orders && saleManage.orders.up ? '新增' : '减少'}}</span>
                  </div>
                  <div class="compare-value">
                    <span v-show="showSales">¥{{ saleManage.orders && saleManage.orders.saleNum }}</span>
                    <span v-show="!showSales">******</span>
                    <i :class="[saleManage.orders && saleManage.orders.up ? 'el-icon-top' : 'el-icon-bottom', saleManage.orders && saleManage.orders.up ? 'up-value' : 'down-value']"></i>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 客户总数卡片 -->
            <div class="card-item">
              <img src="@/assets/home/icon3.png" class="card-img" alt="">
              <div class="card-content">
                <div class="card-title">{{billDate}}客户总数</div>
                <div class="card-value" v-show="showSales">¥{{ saleManage.customers && saleManage.customers.saleroomNum }}</div>
                <div class="card-value" v-show="!showSales">******</div>
                <el-divider></el-divider>
                <div class="card-footer">
                  <div class="compare-text">
                    比上期 <span :class="[saleManage.customers && saleManage.customers.up ? 'up-text' : 'down-text']">{{ saleManage.customers && saleManage.customers.up ? '新增' : '减少'}}</span>
                  </div>
                  <div class="compare-value">
                    <span v-show="showSales">¥{{ saleManage.customers && saleManage.customers.saleNum }}</span>
                    <span v-show="!showSales">******</span>
                    <i :class="[saleManage.customers && saleManage.customers.up ? 'el-icon-top' : 'el-icon-bottom', saleManage.customers && saleManage.customers.up ? 'up-value' : 'down-value']"></i>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 应收款卡片 -->
            <div class="card-item" v-if="!isBaseVersion">
              <img src="@/assets/home/icon4.png" class="card-img" alt="">
              <div class="card-content">
                <div class="card-title">{{billDate}}应收款额</div>
                <div class="card-value" v-show="showSales">¥{{ saleManage.collections && saleManage.collections.saleroomNum }}</div>
                <div class="card-value" v-show="!showSales">******</div>
                <el-divider></el-divider>
                <div class="card-footer">
                  <div class="compare-text">
                    比上期 <span :class="[saleManage.collections && saleManage.collections.up ? 'up-text' : 'down-text']">{{ saleManage.collections && saleManage.collections.up ? '新增' : '减少'}}</span>
                  </div>
                  <div class="compare-value">
                    <span v-show="showSales">¥{{ saleManage.collections && saleManage.collections.saleNum }}</span>
                    <span v-show="!showSales">******</span>
                    <i :class="[saleManage.collections && saleManage.collections.up ? 'el-icon-top' : 'el-icon-bottom', saleManage.collections && saleManage.collections.up ? 'up-value' : 'down-value']"></i>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 库存量卡片 -->
            <div class="card-item" v-if="!isBaseVersion">
              <img src="@/assets/home/icon5.png" class="card-img" alt="">
              <div class="card-content">
                <div class="card-title">当前库存数量</div>
                <div class="card-value" v-show="showSales">¥{{ saleManage.repertoryNum }}</div>
                <div class="card-value" v-show="!showSales">******</div>
                <el-divider></el-divider>
                <div class="card-footer">
                  <div class="compare-text">
                    当前库存金额
                  </div>
                  <div class="compare-value no-change">
                    <span v-show="showSales">¥{{ saleManage.repertoryCost }}</span>
                    <span v-show="!showSales">******</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 经营报表和销售状况全都不显示时，展示流程图 -->
      <div v-if="!businessStatement && !salesStatus" class="process">
        <div class="title">云进销存使用操作流程</div>
        <div class="step">
          <div class="start"><img src="@/assets/home/cjzt.png" alt=""><span>创建账套</span></div>
          <div class="step-item" v-for="item in step.step1" :key="item.text">{{ item.text }}</div>
        </div>
        <img class="next" src="@/assets/home/next.png" alt="">
        <div class="step">
          <div class="start"><img src="@/assets/home/jbxx.png" alt=""><span>基本信息</span></div>
          <div class="step-item" v-for="item in step.step2" :key="item.text">{{ item.text }}</div>
        </div>
        <img class="next" src="@/assets/home/next.png" alt="">
        <div class="step">
          <div class="start"><img src="@/assets/home/qclr.png" alt=""><span>期初录入</span></div>
          <div class="step-item" v-for="item in step.step3" :key="item.text">{{ item.text }}</div>
        </div>
        <img class="next" src="@/assets/home/next.png" alt="">
        <div class="step">
          <div class="start"><img src="@/assets/home/kzsy.png" alt=""><span>开账使用</span></div>
          <div class="step-item" v-for="item in step.step4" :key="item.text">{{ item.text }}</div>
        </div>
      </div>
    </div>
    <div class="home_right">
      <div class="news_div">
        <div>
          <div class="news_tit" style="margin-top: 0">
            <p style="cursor: pointer;" @click="toJryb('待审核单据')">
              <span>今日要办</span>
              <span>更多</span>
            </p>
          </div>
          <div style="cursor: pointer;" @click="toJryb('待审核单据')">
            <p>待审核单据</p>
            <p>
              {{ unCheckedCount }}
              <i class="el-icon-arrow-right"></i>
            </p>
          </div>
          <div style="cursor: pointer;" @click="toJryb('待发货单据')" v-if="!isBaseVersion">
            <p>待发货单据</p>
            <p>
              {{ unSentCount }}
              <i class="el-icon-arrow-right"></i>
            </p>
          </div>
          <div style="cursor: pointer;" @click="toJryb('待收款单据')">
            <p>待收款单据</p>
            <p>
              {{ unCollectionCount }}
              <i class="el-icon-arrow-right"></i>
            </p>
          </div>
          <div style="cursor: pointer;" @click="toJryb('待付款单据')" v-if="!isBaseVersion">
            <p>待付款单据</p>
            <p>
              {{ unPaymentCount }}
              <i class="el-icon-arrow-right"></i>
            </p>
          </div>
        </div>
        <div class="yj_style" v-if="!isBaseVersion">
          <div class="news_tit">
            <p style="cursor: pointer;" @click="toYjxx('库存预警')">
              <span>预警信息</span>
              <span>更多</span>
            </p>
          </div>
          <div style="cursor: pointer;" @click="toYjxx('库存预警')">
            <p>库存预警</p>
            <p>
              {{ storehouseWarningCount }}
              <i class="el-icon-arrow-right"></i>
            </p>
          </div>
          <div style="cursor: pointer;" @click="toYjxx('信用预警')">
            <p>信用预警</p>
            <p>
              {{ creditCount }}
              <i class="el-icon-arrow-right"></i>
            </p>
          </div>
          <div style="cursor: pointer;" @click="toYjxx('其他预警')">
            <p>其他预警</p>
            <p>
              {{ otherWarningCount }}
              <i class="el-icon-arrow-right"></i>
            </p>
          </div>
          <!-- <div>
            <p>客户欠款预警</p>
            <p @click="toYjxx('客户欠款预警')">
              3
              <i class="el-icon-arrow-right"></i>
            </p>
          </div>-->
        </div>
        <div class="dt_style">
          <div class="news_tit">
            <p style="cursor: pointer;" @click="toCpdt()">
              <span>产品动态</span>
              <span>更多</span>
            </p>
          </div>
          <div class="div_notice" v-for="(item, index) in noticeData" :key="index">
            <p class="p_notice_time">{{ item.sendTime.substring(0, 10) }}</p>
            <div class="div_notice_title">{{ item.titile }}</div>
          </div>
        </div>
        <div style="width: 100%;" >
          <div style="height:1px; border-bottom: 1px solid #e8e8e8; margin-bottom: 12px;"></div>
          <div style="display: flex; align-items: center; justify-content: space-between;">
            <div class="my-shop" @click="handleShopRoute('/shopManage/onlineShopGoods')">我的商城</div>
            <div class="my-share" @click="handleShareShop">推广分享</div>
          </div>
          <img v-if="appletCode" style="width: 142px; height: 142px; margin: 10px calc(50% - 71px);" :src="appletCode" />
          <img v-else style="width: 142px; height: 142px; margin: 10px calc(50% - 71px);" src="@/assets/fangshangqu.png" />
          <div style="display: flex; align-items: center; justify-content: space-between;">
            <div class="my-order" @click="handleShopRoute('/shopManage/visitorStatistics')">
              <span style="color: #666; font-size: 12px; font-weight: normal;">今日访问</span>
              <span style="margin-left: 10px;">{{ todayVisitNum }}</span>
            </div>
            <div class="my-order" @click="handleShopRoute('/saleManage/salesRecord/salesOrder')" v-if="!isBaseVersion">
              <span style="color: #666; font-size: 12px; font-weight: normal;">今日订单</span>
              <span style="margin-left: 10px;">{{ todayOrderNum }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="www_div">
        <a href="http://www.xiangguohe.cn" target="_blank">www.xiangguohe.cn</a>
      </div>
    </div>
    <el-dialog title="应用" :visible.sync="dialogVisible" lock-scroll width="58%">
      <div class="dialog_div_new">
        <div class="dialog_middle">
          <div class="selected_div">
            <div>
              <div class="div_tit ys_style">
                <p>{{ selectData.title }}</p>
                <span>(最多8个)</span>
              </div>
              <div class="div_icon">
                <div v-for="(i, k) in selectData.subIconData" :key="k">
                  <i
                    @click="onUnChoice(i, k)"
                    v-if="i.subState"
                    class="el-icon-remove"
                    style="color: #999"
                  ></i>
                  <img  :src="i.subIcon" :alt="i.subState" />
                  <p>{{ i.subTitle }}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="unselected_div">
            <div v-for="(item, index) in iconData" :key="index">
              <div class="div_tit">
                <p>{{ item.title }}</p>
              </div>
              <div class="div_icon">
                <div v-for="(i, k) in item.subIconData" :key="k">
                  <i @click="onChoice(index, k)" v-if="i.subState" class="el-icon-circle-plus" style="color:#999"></i>
                  <img :src="i.subIcon" :alt="i.subState" />
                  <p>{{ i.subTitle }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="dialog_bottom">
          <el-button type="primary" @click.stop="onSubmit">保存</el-button>
          <el-button @click.stop="onCancel">取消</el-button>
        </div>
      </div>
    </el-dialog>
    <DialogShareShop ref="shareShop"></DialogShareShop>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { dateStrFromDate } from '@/utils/DateFormatter'
import { getAction, postAction } from '@/api/manage'
import { ACCOUNT_BOOK } from '@/store/mutation-types'
import Vue from 'vue'
import { formatMoney, formatNumber, handlePagePermissions, handleOtherPerms, sysConfig, handleIsBaseVersion } from '../../utils'
import DialogShareShop from '@/components/c_shop/dialogShareShop'
import { MessageBox } from 'element-ui'
export default {
  name: 'home',
  components: {
    DialogShareShop,
  },
  data() {
    return {
      isBaseVersion: false,
      value1: [],
      dialogVisible: false,
      homeIconData: [],
      // saleDefault: ['销售订单', '销售出库', '销售退货', '销售换货', '商品信息', '往来单位', '库存查询', '单据查询'],
      // warehouseDefault: ['盘点单', '调拨单', '报损单', '报溢单', '采购入库', '采购退货', '销售出库', '销售退货'],
      defaultList: ['商品信息', '往来单位', '采购入库', '销售出库', '销售退货', '付款结算单', '收款结算单', '库存查询'],
      defaultList_base: ['商品信息', '客户管理', '销售出库', '销售退货'],
      selectData: {
        title: '已选功能',
        subIconData: [],
      },
      iconData_base: [
        {
          title: '销售管理',
          subIconData: [
            {
              subTitle: '销售出库',
              subIcon: require('../../assets/home/xsck.png'),
              subState: true,
              url: '/saleManage/salesBill/billSalesDelivery',
            },
            {
              subTitle: '销售退货',
              subIcon: require('../../assets/home/xsth.png'),
              subState: true,
              url: '/saleManage/salesBill/billSalesReturn',
            },
            {
              subTitle: '销售换货',
              subIcon: require('../../assets/home/xshh.png'),
              subState: true,
              url: '/saleManage/salesBill/billSalesExchange',
            },
          ],
        },
        {
          title: '基本信息',
          subIconData: [
            {
              subTitle: '商品信息',
              subIcon: require('../../assets/home/spxx.png'),
              subState: true,
              url: '/baseInfomation/material/commodityInfo',
            },
            {
              subTitle: '客户管理',
              subIcon: require('../../assets/home/wldw.png'),
              subState: true,
              url: '/baseInfomation/material/transactionCompanyInfo',
            },
            {
              subTitle: '员工信息',
              subIcon: require('../../assets/home/ygxx.png'),
              subState: true,
              url: '/baseInfomation/material/staffInfo',
            },
            {
              subTitle: '仓库信息',
              subIcon: require('../../assets/home/ckxx.png'),
              subState: true,
              url: '/baseInfomation/material/warehouseInfo',
            },
            {
              subTitle: '打印设置',
              subIcon: require('../../assets/home/dysz.png'),
              subState: true,
              url: '/baseInfomation/printSetting/printSet',
            },
          ],
        },
      ],
      iconData: [
        {
          title: '销售管理',
          subIconData: [
            {
              subTitle: '销售订单',
              subIcon: require('../../assets/home/xsdd.png'),
              subState: true,
              url: '/saleManage/salesBill/billSalesOrder',
            },
            {
              subTitle: '销售出库',
              subIcon: require('../../assets/home/xsck.png'),
              subState: true,
              url: '/saleManage/salesBill/billSalesDelivery',
            },
            {
              subTitle: '销售退货',
              subIcon: require('../../assets/home/xsth.png'),
              subState: true,
              url: '/saleManage/salesBill/billSalesReturn',
            },
            {
              subTitle: '销售换货',
              subIcon: require('../../assets/home/xshh.png'),
              subState: true,
              url: '/saleManage/salesBill/billSalesExchange',
            },
          ],
        },
        {
          title: '采购管理',
          subIconData: [
            {
              subTitle: '采购订单',
              subIcon: require('../../assets/home/cgdd.png'),
              subState: true,
              url: '/purchaseManage/purchaseBill/billPurchaseOrder',
            },
            {
              subTitle: '采购入库',
              subIcon: require('../../assets/home/cgrk.png'),
              subState: true,
              url: '/purchaseManage/purchaseBill/billPurchaseWarehousing',
            },
            {
              subTitle: '采购退货',
              subIcon: require('../../assets/home/cgth.png'),
              subState: true,
              url: '/purchaseManage/purchaseBill/billPurchaseReturn',
            },
            {
              subTitle: '采购换货',
              subIcon: require('../../assets/home/cghh.png'),
              subState: true,
              url: '/purchaseManage/purchaseBill/billPurchaseExchange',
            },
          ],
        },
        {
          title: '库存管理',
          subIconData: [
            {
              subTitle: '库存查询',
              subIcon: require('../../assets/home/kccx.png'),
              subState: true,
              url: '/reportStatistics/inventoryReport/inventoryQuery',
            },
            {
              subTitle: '盘点单',
              subIcon: require('../../assets/home/pdd.png'),
              subState: true,
              url: '/stockManage/stockBill/billInventoryOrder',
            },
            {
              subTitle: '调拨单',
              subIcon: require('../../assets/home/dbd.png'),
              subState: true,
              url: '/stockManage/stockBill/billtTransferOrder',
            },
            {
              subTitle: '报损单',
              subIcon: require('../../assets/home/bsd.png'),
              subState: true,
              url: '/stockManage/stockBill/billFrmLossOrder',
            },
            {
              subTitle: '报溢单',
              subIcon: require('../../assets/home/byd.png'),
              subState: true,
              url: '/stockManage/stockBill/billOverflowOrder',
            },
            {
              subTitle: '成本调整单',
              subIcon: require('../../assets/home/cbtzd.png'),
              subState: true,
              url: '/stockManage/stockBill/billCostAdjustment',
            },
          ],
        },
        {
          title: '收付管理',
          subIconData: [
            {
              subTitle: '收款结算单',
              subIcon: require('../../assets/home/skjsd.png'),
              subState: true,
              url: '/paymentManage/paymentBill/billCollectionSettlement',
            },
            {
              subTitle: '付款结算单',
              subIcon: require('../../assets/home/fkjsd.png'),
              subState: true,
              url: '/paymentManage/paymentBill/billPaymentSettlement',
            },
            {
              subTitle: '单据查询',
              subIcon: require('../../assets/home/djcx.png'),
              subState: true,
              url: '/reportStatistics/paymentReport/billQuery',
            },
            {
              subTitle: '物流代收结算',
              subIcon: require('../../assets/home/wldsjs.png'),
              subState: true,
              url: '/paymentManage/paymentBill/logisticsCollection',
            },
            {
              subTitle: '物流代付结算',
              subIcon: require('../../assets/home/wldfjs.png'),
              subState: true,
              url: '/paymentManage/paymentBill/logisticsPaymentAgency',
            },
            {
              subTitle: '物流运费结算',
              subIcon: require('../../assets/home/wlyfjs.png'),
              subState: true,
              url: '/paymentManage/paymentBill/logisticsFreightSettlement',
            },
            {
              subTitle: '一般费用单',
              subIcon: require('../../assets/home/ybfyd.png'),
              subState: true,
              url: '/paymentManage/paymentBill/billGeneralSettlement',
            },
            {
              subTitle: '其他收入单',
              subIcon: require('../../assets/home/qtsrd.png'),
              subState: true,
              url: '/paymentManage/paymentBill/billOtherSettlement',
            },
            {
              subTitle: '转账单',
              subIcon: require('../../assets/home/zzd.png'),
              subState: true,
              url: '/paymentManage/paymentBill/billTransferSettlement',
            },
          ],
        },
        {
          title: '基本信息',
          subIconData: [
            {
              subTitle: '商品信息',
              subIcon: require('../../assets/home/spxx.png'),
              subState: true,
              url: '/baseInfomation/material/commodityInfo',
            },
            {
              subTitle: '往来单位',
              subIcon: require('../../assets/home/wldw.png'),
              subState: true,
              url: '/baseInfomation/material/transactionCompanyInfo',
            },
            {
              subTitle: '员工信息',
              subIcon: require('../../assets/home/ygxx.png'),
              subState: true,
              url: '/baseInfomation/material/staffInfo',
            },
            {
              subTitle: '仓库信息',
              subIcon: require('../../assets/home/ckxx.png'),
              subState: true,
              url: '/baseInfomation/material/warehouseInfo',
            },
            {
              subTitle: '账户信息',
              subIcon: require('../../assets/home/zhxx.png'),
              subState: true,
              url: '/baseInfomation/material/accountInfo',
            },
            {
              subTitle: '快递物流',
              subIcon: require('../../assets/home/kdwl.png'),
              subState: true,
              url: '/baseInfomation/material/logisticsInfo',
            },
            {
              subTitle: '期初库存',
              subIcon: require('../../assets/home/qckc.png'),
              subState: true,
              url: '/baseInfomation/beginningOfPeriod/inventoryEntry',
            },
            {
              subTitle: '期初应收应付',
              subIcon: require('../../assets/home/qcysyf.png'),
              subState: true,
              url: '/baseInfomation/beginningOfPeriod/arAndapEntry',
            },
            {
              subTitle: '期初账户余额',
              subIcon: require('../../assets/home/qczhye.png'),
              subState: true,
              url: '/baseInfomation/beginningOfPeriod/accountBalanceEntry',
            },
            {
              subTitle: '打印设置',
              subIcon: require('../../assets/home/dysz.png'),
              subState: true,
              url: '/baseInfomation/printSetting/printSet',
            },
          ],
        },
      ],

      /**
       *  报表相关变量开始
       */
      // 报表
      reportName: 'jybb',
      reportDate: '本月',
      reportType: 0,
      rDateType: 3,
      // 日期选择范围
      reportDateRange: {
        startDate: '',
        endData: '',
      },
      reportNowDate: [],
      reportManage: {}, // 销售报表数据
      saleManage: {},
      reportSale: {}, // 经营报表数据
      reportStock: {}, // 库存报表数据
      /**
       *  报表相关变量结束
       */

      // 单据
      billName: 'xstj',
      billDate: '本月',
      billType: 0,
      bDateType: 3,
      // 日期选择范围
      billDateRange: {
        startDate: '',
        endData: '',
      },
      billNowDate: [],
      // 图标数据
      option: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
          },
        ],
      },
      // 销售统计按钮切换
      xstjButton: [
        {
          name: '销售额',
          state: true,
        },
        {
          name: '商品排名',
          state: false,
        },
        {
          name: '客户排名',
          state: false,
        },
        {
          name: '经手人排名',
          state: false,
        },
      ],
      saleStaticType: 0, // 销售统计类型
      // 销售订单按钮切换
      xsddButton: [
        {
          name: '按商品',
          state: true,
        },
        {
          name: '按客户',
          state: false,
        },
        {
          name: '按经手人',
          state: false,
        },
      ],
      purchaseStaticType: 0, //采购统计类型
      saleOrderData: {
        percentage: 0,
      },
      collectionData: {},
      purchaseOrderData: {
        percentage: 0,
      },
      // 采购统计按钮切换
      cgtjButton: [
        {
          name: '商品排名',
          state: true,
        },
        {
          name: '供应商排名',
          state: false,
        },
      ],
      // 采购订单按钮切换
      cgddButton: [
        {
          name: '按商品',
          state: true,
        },
        {
          name: '按供应商',
          state: false,
        },
        {
          name: '按经手人',
          state: false,
        },
      ],
      tableData: [],
      url: {
        // 今日代办
        todayCount: 'home/auditDocumentsCount', // 今日待办数
        // 经营报表分接口，已弃用
        manageReportGross: 'homePage/operationsStatement/getGrossProfitRate', // 经营报表毛利
        manageReportCost: 'homePage/operationsStatement/getPrimeCostSum', // 经营报表成本
        manageReportSale: 'homePage/operationsStatement/getSaleroom', // 经营报表销售
        // 经营报表总接口
        manageReport: '/homePage/operationsStatement/getOperationsStatementNew',
        saleReport: '/homePage/salesStatement/getSalesStatement', // 销售报表
        stockReport: '/homePage/statusReporting/getStatusReporting', // 库存报表
        // 销售统计
        saleMoney: '/saleCount/saleCount/getSaleCountNew', // 销售额
        saleGoods: '/saleCount/saleCount/getSaleGoodsRank', // 商品排名
        saleCustomer: '/saleCount/saleCount/getSaleCompanyRank', // 客户排名
        saleSeller: '/saleCount/saleCount/getSaleUserRank', // 经手人排名
        //销售订单
        saleOrder: '/salesOrderCount/salesOrderCount/getSalesOrderCount',
        // 应收应付
        collectionCount: '/salesOrderCount/salesOrderCount/getCollectionCount',
        // 采购统计
        purchaseGoods: '/saleCount/saleCount/getPurchaseGoodsRank',
        purchaseSupplier: '/saleCount/saleCount/getPurchaseCompanyRank',
        // 采购订单
        purchaseOrder: '/salesOrderCount/salesOrderCount/getPurchaseOrderCount',
      },
      pagesize: 5, //每页的数据条数
      currentPage: 1, //默认开始页面
      total: 0,
      creditCount: 0, //信用预警总数
      otherWarningCount: 0, //其他预警总数
      storehouseWarningCount: 0, //仓库库存预警总数
      unCheckedCount: 0, //待审核单据总数
      unCollectionCount: 0, //待收款单据总数
      unPaymentCount: 0, //待付款单据总数
      unSentCount: 0, // 待发货单据总数
      noticeData: [],
      isOpenAccount: false,
      updateId: '',
      costPerms: true,
      salesStatus: true, // 是否显示销售状况
      businessStatement: true, // 是否显示经营报表
      otherArr: [
        {
          title: '销售毛利',
          key: 'otherGrossProfit',
        },
        {
          title: '毛利率',
          key: 'otherGrossProfitRate',
        },
        {
          title: '收款金额',
          key: 'otherIncomeAmount',
        },
        {
          title: '付款金额',
          key: 'otherPaymentAmount',
        },
      ],
      showBusiness: true,
      showSales: true,
      step: {
        step1: [{ text: '新建账套' }, { text: '填写账套名称' }],
        step2: [
          { text: '商品信息' },
          { text: '往来单位' },
          { text: '员工信息' },
          { text: '仓库信息' },
          { text: '银行账户' },
          { text: '物流信息' },
        ],
        step3: [{ text: '期初库存' }, { text: '期初应收应付' }, { text: '期初账户余额' }],
        step4: [{ text: '选择开账时间' }, { text: '开始使用' }],
      },
      appletCode: '', // 商城小程序码
      appletName: '', // 商城小程序名称
      todayOrderNum: 0, // 今日订单数
      todayVisitNum: 0, // 今日访问数
    }
  },
  mounted() {
    this.isBaseVersion = handleIsBaseVersion()
    
    // this.getEchartData()
    var that = this
    this.$EventBus.$on('getGuideItem', function (res) {
      if (res == 7) {
        let rect = that.$refs.guide7.getBoundingClientRect()
        let params = {
          rect,
          step: 7,
        }
        this.$EventBus.$emit('showNoviceGuide', params)
      }
    })
    if (this.$store.getters.openAccountValue === 3) {
      this.isOpenAccount = true
    } else {
      this.isOpenAccount = false
    }

    let accountInfo = Vue.ls.get(ACCOUNT_BOOK) || {}
    if (accountInfo && accountInfo.id) {
      if (!this.isBaseVersion) { //必用版不需要报表统计
        // 默认获取本月报表数据
        this.reportChangeDate(this.reportDate)
      }
      // 默认获取本月单据数据
      this.billChangeDate(this.billDate)
      // // 获取今日要办、预警信息等的消息数
      // this.getCount()
      // // 获取产品动态数据
      this.getNotice()
      // 获取开账信息 20230829 未开账之前不能进入首页
      // this.getOpenAccountFlag()
      // 获取打印权限和次数
      // this.getConfigPromptPrintLimit()
    }
  },
  async created() {
    
    let accountBook = Vue.ls.get(ACCOUNT_BOOK)
      const bookId = accountBook && accountBook.id
      let vers = await getAction('/accountbookinfo/xghAccountBook/getVersion', {
        id: bookId,
      })
      if (vers.success) {
        let result = vers.result || '专业版'
        Vue.ls.set('accountVersion', result)
        this.isBaseVersion = result == '必用版'
      } 
      if (this.isBaseVersion) {
      this.iconData = this.iconData_base
    }
    this.selectTitle()
    this.costPerms = handleOtherPerms('查看商品成本价及经营数据')
    this.getShopConfig()
  },
  watch: {
    // 报表改变
    reportDate: {
      deep: true,
      handler(val) {
        this.reportChangeDate(val)
      },
    },
    // 单据改变
    billDate: {
      deep: true,
      handler(val) {
        this.billChangeDate(val)
      },
    },
    '$store.getters.openAccountValue'(val) {
      if (val === 3) {
        this.isOpenAccount = true
      } else {
        this.isOpenAccount = false
        // this.toSystemConfiguration()
      }
    },
    // 路由变化时，更新数据
    $route: {
      immediate: true,
      handler(val) {
        if (val.name === 'dashboard-analysis') {
          // 获取今日要办、预警信息等的消息数
          this.getCount()
          this.salesStatus = sysConfig().sales_status
          this.businessStatement = sysConfig().business_statement
        }
      },
    },
  },
  methods: {
    setDefaultOptions() {
      let sourceList = this.defaultList //业务让固定首页默认应用
      if (sourceList.length) {
        // 筛选出默认的数据源
        let list = []
        this.iconData.forEach((item) => {
          item.subIconData.forEach((v) => {
            if (sourceList.indexOf(v.subTitle) > -1) {
              list.push(Object.assign({}, v))
            }
          })
        })
        // 根据源数据排序
        let result = []
        for (let index = 0; index < sourceList.length; index++) {
          const text = sourceList[index]
          let item = this.getItemByText(text, list)
          if (item) {
            result.push(item)
          }
        }
        this.selectData.subIconData = result
      } else {
        this.selectData.subIconData = []
      }
      if (this.selectData.subIconData.length > 0) {
        // 修改源数据选中状态
        this.selectData.subIconData.forEach((items) => {
          this.iconData.forEach((item) => {
            item.subIconData.forEach((v) => {
              if (v.subTitle == items.subTitle) {
                v.subState = false
              }
            })
          })
        })
      } else {
        // 修改源数据选中状态
        this.iconData.forEach((item) => {
          item.subIconData.forEach((v) => {
            v.subState = true
          })
        })
      }
      // console.log(this.selectData)
      let str = JSON.stringify(this.selectData.subIconData)
      let arr = JSON.parse(str)
      this.homeIconData = arr
    },
    // 查询保存的列配置
    async selectTitle() {
      let accountBook = Vue.ls.get(ACCOUNT_BOOK)
      let accountBookId = (accountBook && accountBook.id) + '-home' + (this.isBaseVersion ? '-base' : '')
      let obj = await this.$setColumn.selectColumn(accountBookId)
      if (obj.code === 200) {
        this.updateId = obj.updateId
        this.defaultList = obj.columnData
      } else if (obj.code === 500) {
        if (this.isBaseVersion) {
          this.updateId = await this.$setColumn.addColumn(accountBookId, this.defaultList_base)
          this.defaultList = this.defaultList_base
        } else {
          this.updateId = await this.$setColumn.addColumn(accountBookId, this.defaultList)
        }
      }
      this.setDefaultOptions()
    },
    // 修改列配置后保存修改后的值
    async onSaveColumn(value) {
      this.defaultList = value
      let accountBook = Vue.ls.get(ACCOUNT_BOOK)
      let accountBookId = (accountBook && accountBook.id) + '-home' + (this.isBaseVersion ? '-base' : '')
      let res = await this.$setColumn.editColumn(accountBookId, this.defaultList, this.updateId)
      if (res.code == 200) {
        this.$elMessage.success(res.message)
      } else {
        this.$elMessage.error(res.message)
      }
    },
    getData() {
      // 默认获取本月报表数据
      this.reportChangeDate(this.reportDate)
      // 默认获取本月单据数据
      this.billChangeDate(this.billDate)
      // 获取今日要办、预警信息等的消息数
      this.getCount()
      // 获取产品动态数据
      this.getNotice()
      // 获取打印权限和次数
      this.getConfigPromptPrintLimit()
    },
    /**
     *  报表相关方法开始
     */
    // 经营/销售/库存报表数据请求
    loadReports() {
      const that = this
      var url = this.url.manageReport
      let params = {
        type: this.rDateType,
        beginTime: this.reportDateRange.startDate,
        endTime: this.reportDateRange.endData,
      }
      if (this.reportType == 0) {
        url = this.url.manageReport
      } else if (this.reportType == 1) {
        url = this.url.saleReport
      } else if (this.reportType == 2) {
        url = this.url.stockReport
      }

      postAction(url, params).then((res) => {
        // console.log('报表---', res)
        if (res.code == 200) {
          if (that.reportType == 0) {
            that.reportManage = res.result
          } else if (that.reportType == 1) {
            that.reportSale = res.result
          } else if (that.reportType == 2) {
            that.reportStock = res.result
          }
        } else {
          that.$elMessage.warning(res.message)
        }
      })
    },
    // 报表判断当前选择时间段
    reportChangeDate(val) {
      switch (val) {
        case '本日':
          this.reportGetTimeRange(this.$setTimeRange(1))
          this.rDateType = 1
          this.loadReports()
          break
        case '本周':
          this.reportGetTimeRange(this.$setTimeRange(3))
          this.rDateType = 2
          this.loadReports()
          break
        case '本月':
          this.reportGetTimeRange(this.$setTimeRange(5))
          this.rDateType = 3
          this.loadReports()
          break
        case '本年':
          this.reportGetTimeRange(this.$setTimeRange(7))
          this.rDateType = 4
          this.loadReports()
          break
        default:
          break
      }
    },
    // 报表获取时间范围并设置
    reportGetTimeRange(data) {
      // console.log(data, '报表获取时间范围')
      this.reportNowDate = [data.now, data.end]
      this.reportDateRange.startDate = data.now
      this.reportDateRange.endData = data.end
    },
    // 报表获取自定义选中时间
    onReportClickPicker(val, str) {
      this.rDateType = 5
      this.reportDateRange.startDate = dateStrFromDate(val[0])
      this.reportDateRange.endData = dateStrFromDate(val[1])
      this.reportDate = '本期'
      this.loadReports()
      this.value1 = [this.reportDateRange.startDate, this.reportDateRange.endData]
    },
    // 报表tab切换
    reportClick(tab, event) {
      this.reportType = tab.index
      this.loadReports()
    },
    // 跳转到经营报表
    toPurchaseReport() {
      if (!this.isOpenAccount) {
        return
      }
      if (!handlePagePermissions('经营状况报表')) {
        return this.$elMessage.warning('没有权限！')
      }
      this.$router.push({
        path: '/reportStatistics/financeReport/operatingStatement',
      })
    },
    // 跳转到销售统计
    toSalesReport() {
      if (!this.isOpenAccount) {
        return
      }
      if (!handlePagePermissions('销售统计(按客户)')) {
        return this.$elMessage.warning('没有权限！')
      }
      this.$router.push({
        path: '/reportStatistics/salesReport/statisticsByCustomer',
      })
    },
    // 跳转到库存明细
    toInventoryReport() {
      if (!this.isOpenAccount) {
        return
      }
      if (!handlePagePermissions('库存查询')) {
        return this.$elMessage.warning('没有权限！')
      }
      this.$router.push({
        path: '/reportStatistics/inventoryReport/inventoryQuery',
      })
    },
    // 计算同比和环比值
    calcRate(now, last) {
      if (now == '******' || last == '******') {
        return '******'
      }
      now = now || 0
      last = last || 0
      return this.getRateOfIncrease(now, last)
    },
    /**
     *  报表相关方法结束
     */

    /**
     *  今日要办, 预警信息, 产品动态相关方法开始
     */
    // 今日待办数据请求
    getCount() {
      getAction('/home/home/getCount', {}).then((res) => {
        if (res.success) {
          this.creditCount = res.result.creditCount ? res.result.creditCount : '0' //信用预警总数
          this.otherWarningCount = res.result.otherWarningCount ? res.result.otherWarningCount : '0' //其他预警总数
          this.storehouseWarningCount = res.result.storehouseWarningCount ? res.result.storehouseWarningCount : '0' //仓库库存预警总数
          this.unCheckedCount = res.result.unCheckedCount ? res.result.unCheckedCount : '0' //待审核单据总数
          this.unSentCount = res.result.unSentCount ? res.result.unSentCount : '0' // 待发货单据总数
          this.unCollectionCount = res.result.unCollectionCount ? res.result.unCollectionCount : '0' //待收款单据总数
          this.unPaymentCount = res.result.unPaymentCount ? res.result.unPaymentCount : '0' //待付款单据总数
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    // 获取消息列表
    getNotice() {
      let data = {
        msgCategory: '1',
        pageSize: 3,
        pageNo: 1,
      }
      getAction('/sys/annountCement/getNotice', data).then((res) => {
        if (res.code === 200) {
          this.noticeData = res.result.records || []
        }
      })
    },
    // 跳转至今日待办
    toJryb(val) {
      if (!this.isOpenAccount) {
        return
      }
      this.$router.push({
        name: 'home-needHandle',
        params: {
          state: val,
        },
      })
    },
    // 跳转至预警信息
    toYjxx(val) {
      if (!this.isOpenAccount) {
        return
      }
      this.$router.push({
        name: 'home-earlyWarning',
        params: {
          state: val,
        },
      })
    },
    // 跳转至产品动态
    toCpdt() {
      this.$router.push({
        path: '/home/productDynamics',
      })
    },
    /**
     *  今日要办, 预警信息, 产品动态相关方法结束
     */

    // 根据模块名获取模块model
    getItemByText(text, list) {
      for (let index = 0; index < list.length; index++) {
        const element = list[index]
        if (element.subTitle == text) {
          return element
        }
      }
      return ''
    },

    // 单据数据
    loadBills() {
      // console.log(this.billNowDate)
      if (this.billType == 0) {
        // 销售统计
        this.loadSaleStatis()
      } else if (this.billType == 1) {
        // 销售订单
        this.loadSaleOrderStatic()
      } else if (this.billType == 2) {
        // 应收应付
        this.getCollectionCount()
      } else if (this.billType == 3) {
        // 采购统计
        this.loadPurchaseStatis()
      } else if (this.billType == 4) {
        // 采购订单
        this.loadPurchaseOrderStatic()
      }
    },
    // 销售统计
    loadSaleStatis() {
      var url = ''
      if (this.saleStaticType == 0) {
        url = this.url.saleMoney
      } else if (this.saleStaticType == 1) {
        url = this.url.saleGoods
      } else if (this.saleStaticType == 2) {
        url = this.url.saleCustomer
      } else if (this.saleStaticType == 3) {
        url = this.url.saleSeller
      }
      let params = {
        startDateStr: this.billDateRange.startDate,
        endDateStr: this.billDateRange.endData,
        pageNo: this.currentPage,
        pageSize: this.pagesize,
      }
      getAction(url, params).then((res) => {
        // console.log('销售统计---', res)
        if (res.success) {
          this.saleManage = res.result
          return
          if (this.saleStaticType == 0) {
            this.refreshEchartsData(res.result)
          } else {
            let records = res.result.records || []
            this.total = res.result.total
            this.tableData = records.map((item, index) => {
              item.xh = (this.currentPage - 1) * this.pagesize + index + 1
              if (item.num) {
                item.num = `${item.num}(数量)`
              }
              item.salePrice = `￥${formatMoney(item.salePrice)}`
              return item
            })
          }
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    refreshEchartsData(result) {
      // console.log(result)
      let xAxis = []
      let data = []
      for (let index = 0; index < result.length; index++) {
        const element = result[index]
        if (this.billDate == '今年') {
          xAxis.push(element.dateStr)
        } else if (this.billDate) {
          xAxis.push(element.dateStr + '日')
        } else {
          xAxis.push(element.dateStr)
        }

        let count = parseFloat(element.saleCount || '0.00')
        data.push(count)
      }
      let that = this
      this.$nextTick(() => {
        var chart = echarts.getInstanceByDom(this.$refs.ecahrtsRef)
        // console.log(chart)
        if (!chart) {
          that.getEchartData(xAxis, data)
        } else {
          var option = chart.getOption()
          // console.log(option)
          option.xAxis[0].data = xAxis
          option.series[0].data = data
          chart.setOption(option)
        }
      })
    },
    loadSaleOrderStatic() {
      var url = this.url.saleOrder
      //同比：比去年  环比：比上一个时间段
      let params = {
        startDateStr: this.billDateRange.startDate,
        endDateStr: this.billDateRange.endData,
      }
      getAction(url, params).then((res) => {
        // console.log('销售订单统计---', res)
        if (res.success) {
          let r = res.result
          this.saleOrderData = r
          //环比增长=（本期数-上期数）/上期数*100%
          //同比增长=（本期数-同期数）/同期数*100%
          r.allNum_tb = this.getRateOfIncrease(r.allNum, r.lastYearAllNum)
          r.allNum_hb = this.getRateOfIncrease(r.allNum, r.lastMonthAllNum)
          r.deliverNumber_tb = this.getRateOfIncrease(r.deliverNumber, r.lastYearDeliverNumber)
          r.deliverNumber_hb = this.getRateOfIncrease(r.deliverNumber, r.lastMonthDeliverNumber)
          r.notDeliverNumber_tb = this.getRateOfIncrease(r.notDeliverNumber, r.lastYearNotDeliverNumber)
          r.notDeliverNumber_hb = this.getRateOfIncrease(r.notDeliverNumber, r.lastMonthNotDeliverNumber)
          r.terminalNum_tb = this.getRateOfIncrease(r.terminalNum, r.lastYearTerminalNum)
          r.terminalNum_hb = this.getRateOfIncrease(r.terminalNum, r.lastMonthTerminalNum)
          r.progress = Math.round((r.deliverNumber / r.allNum) * 100 * Math.pow(10, 2)) / Math.pow(10, 2)
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    getCollectionCount() {
      var url = this.url.collectionCount
      //同比：比去年  环比：比上一个时间段
      let params = {
        startDateStr: this.billDateRange.startDate,
        endDateStr: this.billDateRange.endData,
      }
      getAction(url, params).then((res) => {
        // console.log('应收应付统计---', res)
        if (res.success) {
          let r = res.result
          this.collectionData = r
          //环比增长=（本期数-上期数）/上期数*100%
          //同比增长=（本期数-同期数）/同期数*100%
          r.collectionPrice_tb = this.getRateOfIncrease(r.collectionPrice, r.lastYearCollectionPrice)
          r.collectionPrice_hb = this.getRateOfIncrease(r.collectionPrice, r.lastMonthCollectionPrice)
          r.paymentPrice_tb = this.getRateOfIncrease(r.paymentPrice, r.lastYearPaymentPrice)
          r.paymentPrice_hb = this.getRateOfIncrease(r.paymentPrice, r.lastMonthPaymentPrice)
          r.differencePrice_tb = this.getRateOfIncrease(r.differencePrice, r.lastYearDifferencePrice)
          r.differencePrice_hb = this.getRateOfIncrease(r.differencePrice, r.lastMonthDifferencePrice)
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    loadPurchaseStatis() {
      var url = ''
      if (this.purchaseStaticType == 0) {
        url = this.url.purchaseGoods
      } else if (this.purchaseStaticType == 1) {
        url = this.url.purchaseSupplier
      }
      let params = {
        startDateStr: this.billDateRange.startDate,
        endDateStr: this.billDateRange.endData,
        pageNo: this.currentPage,
        pageSize: this.pagesize,
      }
      getAction(url, params).then((res) => {
        // console.log('采购统计---', res)
        if (res.success) {
          // if (this.purchaseStaticType == 0) {
          let records = res.result.records || []
          this.total = res.result.total
          this.tableData = records.map((item, index) => {
            item.xh = (this.currentPage - 1) * this.pagesize + index + 1
            if (item.num) {
              item.num = `${item.num}(数量)`
            }
            if (this.purchaseStaticType == 1) {
              item.goodsId_dictText = item.xghCompanyId_dictText
            }
            item.purchasePrice = `￥${formatMoney(item.purchasePrice)}`
            return item
          })
          // }
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    loadPurchaseOrderStatic() {
      var url = this.url.purchaseOrder
      //同比：比去年  环比：比上一个时间段
      let params = {
        startDateStr: this.billDateRange.startDate,
        endDateStr: this.billDateRange.endData,
      }
      getAction(url, params).then((res) => {
        // console.log('采购订单统计---', res)
        if (res.success) {
          let r = res.result
          this.purchaseOrderData = r
          //环比增长=（本期数-上期数）/上期数*100%
          //同比增长=（本期数-同期数）/同期数*100%
          r.allNum_tb = this.getRateOfIncrease(r.allNum, r.lastYearAllNum)
          r.allNum_hb = this.getRateOfIncrease(r.allNum, r.lastMonthAllNum)
          r.arrivalNumber_tb = this.getRateOfIncrease(r.arrivalNumber, r.lastYearArrivalNumber)
          r.arrivalNumber_hb = this.getRateOfIncrease(r.arrivalNumber, r.lastMonthArrivalNumber)
          r.notArrivalNumber_tb = this.getRateOfIncrease(r.notArrivalNumber, r.lastYearNotArrivalNumber)
          r.notArrivalNumber_hb = this.getRateOfIncrease(r.notArrivalNumber, r.lastMonthNotArrivalNumber)
          r.terminalNum_tb = this.getRateOfIncrease(r.terminalNum, r.lastYearTerminalNum)
          r.terminalNum_hb = this.getRateOfIncrease(r.terminalNum, r.lastMonthTerminalNum)
          r.progress = Math.round((r.arrivalNumber / r.allNum) * 100 * Math.pow(10, 2)) / Math.pow(10, 2)
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    // 获取增长率
    getRateOfIncrease(val, last) {
      if (val == 0 && last == 0) {
        return 0
      } else if (last == 0) {
        return 100
      } else {
        let n = 2
        let result = Math.round(((val - last) / last) * 100 * Math.pow(10, n)) / Math.pow(10, n)
        return result
      }
    },

    // 处理编辑添加跳转
    // handleImgSkip(url) {
    //   // 已选功能事件函数
    //   alert('已选功能函数')
    //   this.$router.push(url)
    // },
    // // 销售管理函数
    // handleSellSkip() {
    //   alert('销售采购库存功能函数')
    // },
    // 处理首页头部应用跳转
    handleHomeSkip(item) {
      let url = item.url
      // 账套过期不允许进入其他页面
      if (Vue.ls.get('account-no-money')) {
        return this.$elMessage.warning('续费未完成不能操作!')
      }
      //  未开账之前，基本信息可以进入
      if (
        !this.isOpenAccount &&
        ![
          '/baseInfomation/material/commodityInfo',
          '/baseInfomation/material/transactionCompanyInfo',
          '/baseInfomation/material/staffInfo',
          '/baseInfomation/material/warehouseInfo',
          '/baseInformation/basicInfoData/accountInfo',
          '/baseInformation/basicInfoData/logisticsInfo',
        ].includes(url)
      ) {
        return this.$elMessage.warning('未开账不能操作！')
      }
      //打印设置
      if (item.subTitle == '打印设置') {
        let printPermissions = handleOtherPerms('打印模板设置')
        if (!printPermissions) {
          return this.$elMessage.warning('未拥有打印模板设置权限！!')
        }
      }
      //没有当前页面权限
      let title = this.getPushTitle(item.subTitle)
      if (!handlePagePermissions(title)) {
        return this.$elMessage.warning('没有权限！')
      }
      this.$router.push(url)
    },
    getPushTitle(title) {
      // 两个数组个数必须相同
      let diff = ['往来单位', '快递物流', '物流代收结算', '物流代付结算', '物流运费结算']
      if (this.isBaseVersion) {
        diff[0] = '客户管理'
      }
      //权限中的名字
      let revised = ['往来单位信息', '物流信息', '物流代收结算单', '物流代付结算单', '物流运费结算单']

      if (diff.includes(title)) {
        let index = diff.indexOf(title)
        return revised[index]
      } else {
        return title
      }
    },
    // 单据判断当前选择时间段
    billChangeDate(val) {
      switch (val) {
        case '本日':
          this.billBetTimeRange(this.$setTimeRange(1))
          this.bDateType = 1
          this.loadBills()
          break
        case '本周':
          this.billBetTimeRange(this.$setTimeRange(3))
          this.bDateType = 2
          this.loadBills()
          break
        case '本月':
          this.billBetTimeRange(this.$setTimeRange(5))
          this.bDateType = 3
          this.loadBills()
          break
        case '本年':
          this.billBetTimeRange(this.$setTimeRange(7))
          this.bDateType = 4
          this.loadBills()
          break
        default:
          break
      }
    },

    // 单据获取时间范围并设置
    billBetTimeRange(data) {
      this.billNowDate = [data.now, data.end]
      this.billDateRange.startDate = data.now
      this.billDateRange.endData = data.end
    },
    // 保存应用选择
    onSubmit() {
      let str = JSON.stringify(this.selectData.subIconData)
      let arr = JSON.parse(str)
      this.homeIconData = arr
      this.dialogVisible = false
      let list = []
      for (let index = 0; index < this.homeIconData.length; index++) {
        const element = this.homeIconData[index]
        list.push(element.subTitle)
      }
      this.onSaveColumn(list)
    },
    onCancel() {
      // console.log(this.defaultList);
      this.setDefaultOptions()
      this.dialogVisible = false
    },
    // 取消选择模块
    onUnChoice(i, k) {
      this.iconData.forEach((item) => {
        item.subIconData.forEach((v) => {
          if (v.subTitle == i.subTitle) {
            v.subState = true
          }
        })
      })
      this.selectData.subIconData.splice(k, 1)
    },
    // 选择模块
    onChoice(index, k) {
      if (this.selectData.subIconData.length > 7) {
        this.$elMessage.warning('首页最多可添加8个应用，请先移除后再添加！')
      } else {
        this.selectData.subIconData.push({
          ...this.iconData[index].subIconData[k],
        })
        this.iconData[index].subIconData[k].subState = false
      }
    },
    // 点击切换销售统计按钮
    onXstjButton(index) {
      this.tableData = []
      this.currentPage = 1
      this.saleStaticType = index
      this.loadSaleStatis()
      this.xstjButton.forEach((item, i) => {
        if (index == i) {
          item.state = true
        } else {
          item.state = false
        }
      })
    },
    // 点击切换销售订单按钮
    onXsddButton(index) {
      this.xsddButton.forEach((item, i) => {
        if (index == i) {
          item.state = true
        } else {
          item.state = false
        }
      })
    },
    // 点击切换采购统计按钮
    onCgtjButton(index) {
      this.tableData = []
      this.currentPage = 1
      this.purchaseStaticType = index
      this.loadPurchaseStatis()
      this.cgtjButton.forEach((item, i) => {
        if (index == i) {
          item.state = true
        } else {
          item.state = false
        }
      })
    },
    // 点击切换采购订单按钮
    onCgddButton(index) {
      this.cgddButton.forEach((item, i) => {
        if (index == i) {
          item.state = true
        } else {
          item.state = false
        }
      })
    },
    // 图表
    getEchartData(xAxis, data) {
      let that = this
      const myChart = echarts.init(this.$refs.ecahrtsRef)
      // const chart = this.$refs.ecahrtsRef
      myChart.setOption({
        tooltip: {},
        xAxis: {
          data: xAxis || ['1', '2', '3'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            color: '#1890FF',
            name: '销量',
            barWidth: 20,
            type: 'bar',
            label: {
              show: true,
              color: '#1890FF',
              position: 'top',
              formatter: function (params) {
                return that.numToWanYi(params.value)
              },
            },
            data: data || [0, 0, 0],
          },
        ],
      })
    },

    // 单据
    billClick(tab, event) {
      // console.log(123)
      this.billType = tab.index
      this.loadBills()
    },
    // 控制是否显示数据
    handleShow(type) {
      this[type] = !this[type]
    },
    // 销售统计跳转
    salesRowClick(row) {
      // console.log('销售统计', JSON.stringify(row))
      if (!handlePagePermissions('销售明细查询')) {
        return this.$elMessage.warning('没有权限！')
      }
      let data = {
        goodsId: row.goodsId || '',
        companyId: row.xghCompanyId || '',
        sysUserId: row.userId || '',
      }
      this.$router.push({
        name: 'reportStatistics-salesReport-salesDtails',
        params: data,
      })
    },

    // 采购统计跳转
    purchaseRowClick(row) {
      // console.log('采购统计', JSON.stringify(row))
      if (!handlePagePermissions('采购明细查询')) {
        return this.$elMessage.warning('没有权限！')
      }
      let data = {
        goodsId: row.goodsId || '',
        companyId: row.xghCompanyId || '',
      }
      this.$router.push({
        name: 'reportStatistics-purchaseReport-purchaseDtails',
        params: data,
      })
    },

    // 单据获取当前选中时间
    onBillClickPicker(val) {
      this.bDateType = 5
      this.billDateRange.startDate = dateStrFromDate(val[0])
      this.billDateRange.endData = dateStrFromDate(val[1])
      this.billDate = '本期'
      this.loadBills()
    },
    // 获取每页几条数据
    handleSizeChange(val) {
      this.pagesize = val
      this.loadBills()
    },
    // 获取当前第几页
    handleCurrentChange(val) {
      this.currentPage = val
      this.loadBills()
    },
    // 获取期初信息
    getOpenAccountFlag() {
      getAction('/openAccount/getOpenAccountType', {}).then((res) => {
        if (res.code === 200) {
          if (!res.result) {
            // 开单标志，res.result为null表示新账套
            this.$store.commit('SET_OPEN_ACCOUNT_VALUE', 0)
            this.toSystemConfiguration()
          } else {
            this.$store.commit('SET_OPEN_ACCOUNT_VALUE', Number(res.result.value))
            // 开单标志，3表示已经开账，其他状态为开账中，需要跳转开账页面
            if (res.result.value == 3) {
              this.isOpenAccount = true
              this.getData()
            } else {
              this.isOpenAccount = false
              this.toSystemConfiguration()
            }
          }
        }
      })
    },
    /**
     * 获取打印权限和次数
     */
    async getConfigPromptPrintLimit() {
      let paramVal = { code: 'prompt_print_limit' }
      const data = await getAction('/sysConfig/systemConfig/getConfigInfoByCodeAndXghAccountBookId', paramVal)
      if (data.code == 200) {
        this.$lcStorage.set('printLimitValue', data.result.value == 1 ? true : false)
        this.$lcStorage.set('printLimitOptions', data.result.options)
      }
    },
    toSystemConfiguration() {
      if (!Vue.ls.get('account-no-money')) {
        this.$router.push({ name: 'business-SystemConfiguration' }).catch((err) => {})
      }
    },
    // 数字转万和亿
    numToWanYi(value) {
      if (value == '******') {
        return value
      }
      if (!value) {
        return this.$formatMoney(0)
      }
      let num = parseFloat(value)
      if (num < 10000) {
        return this.$formatMoney(num)
      } else if (num < 100000000) {
        let newNum = num / 10000.0
        return this.$formatMoney(newNum) + '万'
      } else if (num >= 100000000) {
        let newNum = num / 100000000.0
        return this.$formatMoney(newNum) + '亿'
      }
    },
    // 获取商城配置信息
    getShopConfig() {
      getAction('/xghRequestForm/xghRequestForm/getRequestForm', {}).then((res) => {
        if (res.success && res.result && res.result.length > 0 && res.result[0].appletCode) {
          this.appletCode = res.result[0].appletCode || ''
          this.appletName = res.result[0].appletName || ''
          if (this.appletCode) {
            this.getTodayOrderNum()
            this.getTodayVisitNum()
          }
        }
      })
    },
    // 获取今日访问数
    getTodayVisitNum() {
      getAction('/goods/yoshopGoods/getAllUserAccess', {
        beginDate: this.$setTimeRange(1).now,
        endDate: this.$setTimeRange(1).end,
      }).then((res) => {
        if (res.success) {
          this.todayVisitNum = res.result || 0
        }
      })
    },
    // 获取今日订单数
    getTodayOrderNum() {
      getAction('/xghAppletOrder/getAppletOrderCount', {
        startDateStr: this.$setTimeRange(1).now,
        endDateStr: this.$setTimeRange(1).end,
      }).then((res) => {
        if (res.success) {
          this.todayOrderNum = res.result || 0
        }
      })
    },
    // 商城推广分享
    handleShareShop() {
      // 非账套管理员不可点击
      let accountBook = Vue.ls.get(ACCOUNT_BOOK)
      if (!accountBook.isLeader) return
      // 账套管理员判断是否购买小程序商城
      if (!this.appletCode) {
        MessageBox.confirm('您还没有购买小程序商城?', '提示', {
          confirmButtonText: '去购买',
          cancelButtonText: '取消',
          type: 'warning',
          center: true,
        }).then((res) => {
          this.$router.push({
            path: '/shopManage/buyShop',
          })
        })
        return
      }
      this.$refs.shareShop.appletCode = this.appletCode
      this.$refs.shareShop.appletName = this.appletName
      this.$refs.shareShop.dialogVisible = true
    },
    handleShopRoute(path) {
      // 非账套管理员不可点击
      let accountBook = Vue.ls.get(ACCOUNT_BOOK)
      if (!accountBook.isLeader) return
      // 账套管理员判断是否购买小程序商城
      if (!this.appletCode) {
        MessageBox.confirm('您还没有购买小程序商城?', '提示', {
          confirmButtonText: '去购买',
          cancelButtonText: '取消',
          type: 'warning',
          center: true,
        }).then((res) => {
          this.$router.push({
            path: '/shopManage/buyShop',
          })
        })
        return
      }
      this.$router.push({
        path,
      })
    },
  },
}
</script>

<style lang='scss' scoped>
.echartsDiv {
  height: 1.875117rem;
}

.basic_info {
  width: 100%;
  height: calc(100vh - 1.875117rem);
  background: #f0f2f5;
  box-sizing: border-box;
  padding: 12px 14px 14px;
  display: flex;
}

.home_left {
  width: calc(100% - 4.387774rem - 0.243765rem);
  height: 100%;
}

.icon_div {
  width: 100%;
  // height: 90px;
  background: #fff;
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  justify-content: space-between;

  > p {
    margin: 0;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #1b94fb;
  }

  .div_i {
    flex: 1;
    margin: 0 12px;
    display: flex;

    // justify-content: space-between;
    > div {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: calc(100% / 8);

      > p {
        font-size: 14px;
        font-family: PingFangSC-Regular;
        color: #666666;
        margin: 8px 0 0 0;
      }
    }
  }
}

::v-deep .el-tabs {
  .el-tabs__nav-wrap::after {
    height: 1px;
    background: #e8e8e8;
  }

  .el-tabs__header {
    height: 45px;
    margin-bottom: 0;

    .el-tabs__nav-wrap {
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      padding: 0 14px;
      margin-bottom: 0;

      .el-tabs__nav-scroll {
        height: 100%;

        .el-tabs__nav {
          height: 45px;
        }
      }
    }
  }

  .el-tabs__active-bar {
    background-color: #1890ff;
  }

  .el-tabs__item {
    font-size: 16px;
    font-family: PingFang SC;
    color: #666;
    margin-top: 3px;
    padding: 0 7px;
  }

  .el-tabs__item.is-active {
    font-weight: 500;
    color: #1890ff;
  }

  .el-tabs__content {
    width: 100%;
    // height: calc(100% - 0.843803rem);
    overflow: hidden;
  }
}

.div_tit {
  width: 100%;
  // height: 0.843803rem;
  position: relative;
}

.tit_select_date {
  // position: absolute;
  // top: 9px;
  // right: 32px;
  display: flex;
  align-items: center;

  > p {
    width: 30px;
    margin: 0;
    font-size: 12px;
    font-family: PingFangSC-Regular;
    color: #666;
    cursor: pointer;
  }

  .active_style {
    color: #1890ff;
  }

  .date_picker_style {
    width: 178px;
    height: 28px;
    background: #ffffff;
    border: 1px solid #d9d9d9;
    opacity: 1;
    border-radius: 4px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 5px;
    position: relative;

    p {
      width: 100%;
      margin: 0;
      font-size: 12px;
      color: #666;
      font-family: HelveticaNeue;
      color: #666666;
    }

    i {
      font-size: 15px;
      color: #d9d9d9;
    }

    ::v-deep .el-date-editor {
      width: 178px;
      height: 30px;
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1000;

      .el-range-input {
        font-size: 12px;
      }

      .el-range-separator {
        line-height: 30px;
        font-size: 12px;
      }
    }
  }
}

// 报表
.report_sub_div {
  // height: 2.71892rem;
  margin: 0;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 14px -10px;
  // gap: 10px;
  min-height: 170px;
  > div {
    width: calc(100% / 4);
    height: auto;
    margin-right: 15px;
    padding: 8px 15px 20px 15px;
    border-radius: 5px;
    position: relative;
    min-height: 170px;
    .inner_count {
      display: flex;
      flex-wrap: wrap;
      margin-top: 10px;
      color: #000;
      div {
        width: calc(50% - 7px);
        margin-bottom: 7px;
        background: #fff;
        border-radius: 5px;
        padding: 5px 10px;
        &:nth-child(2n) {
          margin-left: 7px;
        }
        span {
          margin-left: 0;
        }
      }
      h4 {
        font-weight: bold;
        color: #000 !important;
      }
      h5 {
        color: #666666;
      }
    }
    &:first-child {
      background: linear-gradient(0deg, #fbad19, #ff6200);
    }
    &:nth-child(2) {
      background: linear-gradient(0deg, #4beab3, #00a7a0);
    }
    &:nth-child(3) {
      background: linear-gradient(0deg, #ff9f9f, #ff6d6d);
      img {
        bottom: 5px;
      }
    }
    &:nth-child(4) {
      background: linear-gradient(0deg, #3ea1ff, #005eb7);
      margin-right: 0;
    }
    h3 {
      font-size: 18px;
      color: #fff;
      // font-weight: bold;
      font-family: PingFangSC-Regular;
    }
    h4 {
      font-size: 26px;
      color: #fff;
      word-break: break-all;
      // font-weight: bold;
    }
    img {
      width: 75%;
      position: absolute;
      bottom: 20px;
      left: 20px;
    }
    > p {
      margin: 0;
    }

    p:nth-child(1) {
      font-size: 14px;
      color: #666;
      font-family: PingFangSC-Regular;
      margin-left: 5px;
    }

    p:nth-child(2) {
      // height: 50px;
      line-height: 30px;
      box-sizing: border-box;
      padding-bottom: 12px;
      font-size: 30px;
      font-family: HelveticaNeue;
      color: #000;
      border-bottom: 1px solid #e8e8e8;
      word-break: break-all;
    }

    > div {
      span {
        font-size: 14px;
        color: #666;
        font-family: PingFangSC-Regular;
        margin-left: 5px;
      }

      > i {
        font-size: 14px;
        margin-left: 5px;
      }

      .el-icon-question {
        color: #cbced3;
      }

      .el-icon-upload2 {
        color: #fd6c21;
      }

      .upload2 {
        color: #fd6c21;
        margin-left: 0;
      }

      .el-icon-download {
        color: #20c9ac;
      }

      .download {
        color: #20c9ac;
        margin-left: 0;
      }
    }
  }
}

// 单据
.bill_sub_div {
  margin: 0;
  // height: 350px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  // padding: 14px 0;

  .left_button {
    width: 70px;
    height: 100%;
    margin-right: 30px;
    display: flex;
    flex-direction: column;

    ::v-deep .el-button {
      width: 70px;
      height: 30px;
      margin-left: 0;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #666;
      }
    }

    ::v-deep .el-button--primary {
      background-color: #1b94fb;
      border-color: #1b94fb;

      span {
        color: #fff;
      }
    }
  }

  .button_div {
    width: calc(100% - 1.312582rem - 30px);
    height: 100%;
    box-sizing: border-box;
  }

  .xse_style {
    height: 100%;
  }

  // .sppm_style {
  //   background: red;
  // }
  // .khpm_style {
  //   background: yellow;
  // }
  // .ywypm_style {
  //   background: purple;
  // }
  .table_div {
    width: 100%;
    height: calc(100% - 50px);

    ::v-deep .el-table {
      box-sizing: border-box;

      &::before {
        height: 0;
      }

      th,
      td {
        padding: 0;
        color: #666;
        box-sizing: border-box;
        border-bottom: 1px dashed #e8e8e8;
      }

      .cell {
        line-height: 31.9px;
        font-size: 14px;
      }

      .el-table__body tr:hover > td {
        background: #e3f6ff;
      }

      //滚动条的宽度
      ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
        background-color: #e5e5e5;
      }

      //滚动条的滑块
      ::-webkit-scrollbar-thumb {
        background-color: #c9c9c9;
      }
    }

    .index_button {
      width: 20px;
      height: 20px;
      background: #f0f2f5;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-family: HelveticaNeue-Medium;
      color: #000000;
    }
  }

  .table_pagination {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    padding: 14px 0;
    display: flex;

    .pagination_div {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      ::v-deep .el-pagination {
        padding: 0;
        height: 30px;

        .el-pagination__sizes {
          margin: 0;

          .el-input {
            margin-right: 0;
          }
        }
      }
    }
  }

  .xsdd_sub_style {
    display: flex;
    flex-direction: column;
    // justify-content: space-between;
    box-sizing: border-box;
    padding-bottom: 38px;

    .report_sub_div {
      > div {
        p:nth-child(2) {
          border-bottom: none;
        }
      }
    }

    .progress_div {
      width: 100%;
      height: 50px;

      ::v-deep .el-progress {
        height: 50px;
        display: flex;
        align-items: center;

        .el-progress-bar__inner {
          background-color: #1b94fb;
        }
      }
    }
  }

  .progress_div_style {
    ::v-deep .el-progress-bar__inner {
      background-color: #fd6c21 !important;
    }
  }
}

// 应收应付
.bill_ysyf_div {
  margin: 0;
  height: 5rem;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 38px 1.12507rem;

  > div {
    height: 100%;

    > p {
      margin: 0;
    }

    p:nth-child(1) {
      font-size: 14px;
      color: #666;
      font-family: PingFangSC-Regular;
      margin-left: 0.093756rem;
    }

    p:nth-child(2) {
      height: 38px;
      line-height: 38px;
      box-sizing: border-box;
      margin: 15px 0;
      font-size: 30px;
      font-family: HelveticaNeue;
      color: #000;
    }

    > div {
      span {
        font-size: 14px;
        color: #666;
        font-family: PingFangSC-Regular;
        margin-left: 0.093756rem;
      }

      > i {
        font-size: 0.262516rem;
        margin-left: 0.093756rem;
      }

      .el-icon-question {
        color: #cbced3;
      }

      .el-icon-upload2 {
        color: #fd6c21;
      }

      .upload2 {
        color: #fd6c21;
        margin-left: 0;
      }

      .el-icon-download {
        color: #20c9ac;
      }

      .download {
        color: #20c9ac;
        margin-left: 0;
      }
    }

    .echarts_div {
      width: 100%;
      // height: 30px;
      margin-bottom: 10px;

      > img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .total_div {
    // width: calc(100% / 3);
  }

  .difference_div {
    > div:first-child {
      height: 114px;
      min-width: 238px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border: 1px solid #cbced3;
      border-radius: 14px;
      margin-bottom: 10px;

      // padding: 26px 0;
      > p {
        margin: 0;

        &:last-child {
          color: #fd6c21;
          margin-top: 10px;
          padding: 0;
          line-height: 38px;
          height: 38px;
          font-size: 30px;
        }
      }
    }
  }
}

.report_div {
  width: 100%;
  margin-top: 20px;
  // background: #fff;
}

.bill_div {
  width: 100%;
  height: 400px;
  // background: #fff;
  overflow: hidden;
  margin-top: 20px;

  ::v-deep .el-tabs {
    height: 45px;
  }
}

.home_right {
  width: 4.387774rem;
  margin-left: 0.243765rem;
  // height: 100%;
  box-sizing: border-box;
  background: #fff;
  justify-content: space-between;
  display: flex;
  flex-direction: column;
}

.news_div {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  background: #fff;

  > div {
    width: 100%;

    > div {
      width: 100%;
      height: 31px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      > p {
        font-size: 12px;
        color: #666;
        font-family: PingFangSC-Regular;
      }
    }

    .news_tit {
      margin-top: 15px;
      width: 100%;
      height: 30px;
      box-sizing: border-box;
      border-bottom: 1px solid #e8e8e8;
      display: block;
      margin-bottom: 15px;

      > p {
        margin: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        > span {
          color: #3aa0fc;
          font-family: PingFang SC;
          font-size: 12px;

          &:first-child {
            font-weight: 600;
            font-size: 16px;
          }
        }
      }
    }
  }

  .yj_style {
    > div {
      > p {
        &:last-child {
          color: #ff3e3e;
        }
      }
    }
  }

  .dt_style {
    > div {
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 15px;

      // height: 0.656291rem;
      > p {
        margin: 0;

        &:first-child {
          color: #999;
        }
      }
    }

    .div_notice {
      height: 50px;
      margin-bottom: 15px;

      .p_notice_time {
        font-size: 12px;
        color: #999;
        font-family: HelveticaNeue;
        line-height: 22px;
      }

      .div_notice_title {
        font-size: 12px;
        margin-top: 4px;
        font-family: PingFangSC-Regular;
        line-height: 22px;
        color: #666;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
}

.my-shop {
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 16px;
  color: #3aa0fc;
  line-height: 22px;
  cursor: pointer;
}

.my-share {
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 12px;
  color: #3aa0fc;
  line-height: 22px;
  cursor: pointer;
}

.my-order {
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  font-size: 14px;
  color: #1b94fb;
  line-height: 30px;
  cursor: pointer;
}

.www_div {
  width: 100%;
  // height: 37px;
  padding: 17px 18px 24px 18px;
  border-top: 1px solid #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;

  a {
    margin: 0;
    font-size: 14px;
    font-family: PingFangSC-Regular;
    color: #1b94fb;
  }
}

::v-deep .el-dialog {
  margin-top: 10vh !important;

  .el-dialog__body {
    padding: 0;
  }

  .el-dialog__header {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    padding: 0 0.375023rem;
    border-bottom: 1px solid #eeeeee;
    display: flex;
    align-items: center;
    justify-content: space-between;

    span {
      font-size: 0.300019rem;
      color: #666;
      font-weight: 600;
    }

    .el-dialog__headerbtn {
      position: static;

      .el-icon-close {
        color: #999;
        font-size: 0.48753rem;
      }
    }
  }
}

.dialog_div_new {
  width: 100%;
  height: 75vh;
  overflow: auto;
  background: #fff;

  .dialog_middle {
    height: calc(100% - 1.12507rem);
    margin-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
    padding: 0 0.375023rem;
    overflow: auto;

    // //滚动条的宽度
    // ::-webkit-scrollbar {
    //   width: 14px;
    //   height: 14px;
    //   background-color: #e5e5e5;
    // }
    // //滚动条的滑块
    // ::-webkit-scrollbar-thumb {
    //   background-color: #c9c9c9;
    // }
    .selected_div,
    .unselected_div {
      > div {
        display: flex;
        border-bottom: 1px solid #eeeeee;
        padding-top: 0.375023rem;

        p {
          margin: 0;
        }

        .div_tit {
          width: 1.687605rem;
          box-sizing: border-box;
          padding-left: 14px;

          p {
            font-size: 0.262516rem;
            font-family: PingFang SC;
            font-weight: 600;
            color: #666;
          }
        }

        .ys_style {
          p {
            color: #3aa0fc;
          }

          span {
            font-size: 12px;
            font-family: PingFangSC-Regular;
            color: #999;
          }
        }

        .div_icon {
          width: calc(100% - 1.687605rem);
          display: flex;
          flex-wrap: wrap;

          // background: red;
          > div {
            width: 1.875117rem;
            // background: pink;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            margin-bottom: 0.375023rem;
            padding-top: 14px;

            p {
              font-size: 0.262516rem;
              font-family: PingFangSC-Regular;
              color: #666;
              margin-top: 14px;
            }

            img {
              height: 0.712545rem;
            }

            i {
              font-size: 0.337521rem;
              color: #1993fb;
              position: absolute;
              right: 0.150009rem;
              top: 0;
            }
          }
        }
      }
    }

    // div {
    //   p {
    //     margin: 0;
    //     font-size: 12px;
    //     font-family: PingFang SC;
    //     font-weight: 400;
    //     color: #666666;
    //   }
    //   input {
    //     flex: 1;
    //     height: 30px;
    //     background: #ffffff;
    //     border: 1px solid #e3e3e3;
    //     opacity: 1;
    //     border-radius: 4px;
    //     font-size: 12px;
    //     color: #666;
    //     box-sizing: border-box;
    //     padding: 0 14px;
    //     &:focus {
    //       outline: none;
    //       border-color: #1890ff;
    //     }
    //   }
    //   ::v-deep .el-select {
    //     margin-left: 30px;
    //     flex: 1;
    //     .el-input {
    //       .el-input__inner {
    //         height: 30px;
    //         background: #ffffff;
    //         border: 1px solid #e3e3e3;
    //         opacity: 1;
    //         border-radius: 4px;
    //         font-size: 12px;
    //         color: #666;
    //         box-sizing: border-box;
    //         padding: 0 14px;
    //       }
    //       .el-input__suffix {
    //         height: 30px;
    //         display: flex;
    //         align-items: center;
    //       }
    //     }
    //   }
    // }
    .input_switch {
      display: flex;
      height: 30px;
      margin-top: 14px;

      div {
        flex: 1;
        display: flex;
        align-items: center;
        margin-right: 0.375023rem;

        p {
          width: 50px;
          text-align: justify;
          text-justify: distribute-all-lines;
          /*ie6-8*/
          text-align-last: justify;
          /* ie9*/
          -moz-text-align-last: justify;
          /*ff*/
          -webkit-text-align-last: justify;
          /*chrome 20+*/
        }

        ::v-deep .el-switch {
          margin-left: 30px;
          flex: 0;

          .el-switch__core {
            width: 30px;
            height: 0.31877rem;
          }

          .el-switch__core:after {
            width: 14px;
            height: 14px;
            top: 0;
          }

          .is-checked .el-switch__core::after {
            margin-left: 14px !important;
          }
        }

        ::v-deep .el-switch.is-checked .el-switch__core::after {
          left: 100%;
          margin-left: -14px;
        }

        span {
          color: #fd6c21;
          font-size: 12px;
          margin-left: 30px;
        }
      }
    }

    .input_textarea {
      display: flex;
      align-items: flex-start;
      margin-top: 14px;

      p {
        width: 50px;
        text-align: justify;
        text-justify: distribute-all-lines;
        /*ie6-8*/
        text-align-last: justify;
        /* ie9*/
        -moz-text-align-last: justify;
        /*ff*/
        -webkit-text-align-last: justify;
        /*chrome 20+*/
      }

      textarea {
        margin-left: 30px;
        flex: 1;
        background: #ffffff;
        border: 1px solid #e3e3e3;
        border-radius: 4px;
        font-size: 12px;
        color: #666;
        box-sizing: border-box;
        padding: 14px;

        &:focus {
          outline: none;
          border-color: #1890ff;
        }
      }
    }

    .input_line {
      display: flex;
      height: 30px;
      margin-top: 14px;

      div {
        flex: 1;
        display: flex;
        align-items: center;

        &:first-child {
          margin-right: 14px;
        }

        &:last-child {
          margin-left: 14px;
        }

        ::v-deep .el-select {
          margin-left: 30px;
        }
      }

      > div {
        > p:first-child {
          display: block;
          width: 1.312582rem;
          width: 50px;
          text-align: justify;
          text-justify: distribute-all-lines;
          /*ie6-8*/
          text-align-last: justify;
          /* ie9*/
          -moz-text-align-last: justify;
          /*ff*/
          -webkit-text-align-last: justify;
          /*chrome 20+*/
        }

        input {
          margin-left: 30px;
        }
      }

      .line_dialog {
        width: 100%;

        .dialog_input {
          flex: 1;
          position: relative;
          display: flex;
          align-items: center;
          justify-content: flex-end;

          ::v-deep .el-select {
            margin-right: 0;

            .el-select-dropdown__item {
              p {
                margin: 0;
              }
            }

            i {
              display: none;
            }
          }

          i {
            position: absolute;
            margin-right: 14px;
            color: #bfbfbf;
            font-size: 14px;
            cursor: pointer;
          }
        }
      }

      .line_areaAddress {
        div {
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-left: 0;

          .address_china {
            flex: 0;
            width: 50px;
            height: 30px;
            text-align: center;
          }

          ::v-deep .el-cascader {
            flex: 1;
            margin-left: 14px;
            height: 30px;

            .el-input {
              display: flex;
              align-items: center;

              .el-input__inner {
                height: 30px;
                font-size: 12px;
                color: #666;
              }

              .el-input__suffix {
                height: 30px;
                display: flex;
                align-items: center;
              }
            }
          }
        }
      }

      .line_detailedAddress {
        ::v-deep .el-button {
          width: 38px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          margin-left: 0.093756rem;
          background: #1890ff;
        }
      }
    }

    .p_width {
      > div {
        > p:first-child {
          display: block;
          width: 1.312582rem;
          text-align: justify;
          text-justify: distribute-all-lines;
          /*ie6-8*/
          text-align-last: justify;
          /* ie9*/
          -moz-text-align-last: justify;
          /*ff*/
          -webkit-text-align-last: justify;
          /*chrome 20+*/
        }

        input {
          margin-left: 14px;
        }
      }

      div {
        .el-switch {
          margin-left: 14px;
        }
      }
    }
  }

  .dialog_bottom {
    width: 100%;
    height: 1.12507rem;
    box-sizing: border-box;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: center;

    ::v-deep .el-button {
      width: 1.12507rem;
      height: 30px;
      text-align: center;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      border-radius: 0.093756rem;
      background: #fff;
      border: 1px solid #dddddd;
      color: #666666;
    }

    ::v-deep .el-button--primary {
      background: #1890ff;
      border-color: #1890ff;
      color: #fff;
      margin-right: 0.112507rem;
    }

    ::v-deep .el-button--default {
      margin-left: 0.112507rem;
    }
  }
}

.popup_div {
  ::v-deep .el-dialog {
    margin-top: 33vh !important;
  }
}

.tab_title {
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  background: #fff;
  border-radius: 5px;
  .title {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 20px;
    color: #1a93fa;
    display: flex;
    align-items: center;
    span {
      margin-right: 5px;
      display: inline-block;
    }
  }
  &_img {
    width: 32px;
    cursor: pointer;
  }
}

.dashboard-cards {
  display: flex;
  width: 100%;
  gap: 16px;
  margin-bottom: 20px;
}

.card-item {
  flex: 1;
  min-height: 230px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 20px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  .card-img {
    width: 22px;
    height: 22px;
    margin-bottom: 15px;
  }
  &::after {
    content: '';
    background: #bfddff;
    width: 100%;
    height: 10px;
    border-radius: 0 0 5px 5px;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  &:nth-child(2)::after {
    background: #cfc1ff;
  }
  &:nth-child(3)::after {
    background: #afe4ce;
  }
  &:nth-child(4)::after {
    background: #ffd9c5;
  }
  &:nth-child(5)::after {
    background: #f9dea7;
  }
}

.card-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  i {
    color: #fff;
    font-size: 20px;
  }
}

.blue-bg {
  background-color: #409eff;
}

.purple-bg {
  background-color: #8e44ad;
}

.green-bg {
  background-color: #2ecc71;
}

.red-bg {
  background-color: #ff6b6b;
}

.orange-bg {
  background-color: #f39c12;
}

.card-title {
  font-size: 16px;
  color: #606266;
}

.sub-title {
  font-size: 12px;
  color: #909399;
  line-height: 1.4;
}

.highlight-text {
  color: #ff6b6b;
  font-weight: bold;
}

.card-value {
  font-size: 20px;
  color: #000;
  margin-bottom: 20px;
  word-break: break-all;
}

.card-footer {
  display: flex;
  flex-direction: column;
  font-size: 12px;
}

.compare-text {
  color: #909399;

  span {
    font-weight: bold;
  }
}

.up-text {
  color: #fd6c21;
}

.down-text {
  color: #19a443;
}

.compare-value {
  display: flex;
  font-size: 14px;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  color: #666;
  span {
    word-break: break-all;
  }

  i {
    margin-left: 4px;
    font-size: 20px;
    font-weight: bold;
  }
}

.up-value {
  color: #fd6c21;
}

.down-value {
  color: #19a443;
}

.no-change {
  color: #606266;
}

.bill_sub_div {
  width: 100%;
  margin-top: 20px;
}
.byjyxx {
  h4 {
    color: #666 !important;
    font-size: 12px !important;
    word-break: break-all;
  }
}
.process {
  border: 2px dashed #8ac6ff;
  border-radius: 20px;
  padding: 50px 30px 30px 30px;
  position: relative;
  margin-top: 100px;
  .title {
    padding: 10px 25px;
    border-radius: 30px;
    background: linear-gradient(180deg, #3ea1ff, #005eb7);
    color: #fff;
    text-align: center;
    width: max-content;
    font-size: 20px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .step {
    display: flex;
    .start {
      background: linear-gradient(180deg, #3db1ff, #005ace);
      padding: 10px 20px;
      border-radius: 10px;
      color: #fff;
      text-align: center;
      width: max-content;
      font-size: 18px;
      display: flex;
      align-items: center;
      img {
        margin-right: 10px;
        width: 25px;
      }
    }
    .step-item {
      background: #fff;
      padding: 10px 20px;
      border-radius: 10px;
      color: #666;
      text-align: center;
      width: max-content;
      font-size: 16px;
      display: flex;
      align-items: center;
      position: relative;
      margin-left: 25px;
      &::after {
        content: '';
        width: 25px;
        border: 1px dashed #8ac6ff;
        position: absolute;
        left: -25px;
      }
    }
  }
  .next {
    width: 25px;
    margin: 15px 0 15px 60px;
  }
}
</style>